<template>
  <view class="address-container">
    <!-- 滚动内容区域 -->
    <scroll-view class="scroll-content" scroll-y>
      <!-- 地址列表 -->
      <view class="address-list" v-if="addressList.length > 0">
        <view
            class="address-item"
            v-for="(item, index) in addressList"
            :key="item.id"
            @click="selectAddress(item)"
        >
          <!-- 默认标签 -->
          <view class="default-tag" v-if="item.status">
            <text class="tag-text">默认</text>
          </view>

          <!-- 地址信息 -->
          <view class="address-info">
            <!-- 收货人信息 -->
            <view class="recipient-info">
              <text class="recipient-name">{{ item.takePeople }}</text>
              <text class="recipient-phone">{{ item.mobile }}</text>
            </view>

            <!-- 详细地址 -->
            <view class="address-detail">
              <text class="address-text">{{ item.address }}</text>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="address-actions">
            <view class="action-btn set-default-btn" @click.stop="setDefault(item)"
                  v-if="!item.status">
              <text class="btn-text">设为默认</text>
            </view>
            <view class="action-btn use-but" @click.stop="setUse(item)"
                  v-if="showUse">
              <text class="btn-text">使用</text>
            </view>
            <view class="action-btn edit-btn" @click.stop="editAddress(item)">
              <u-icon name="edit-pen" size="28" color="#4182bb"></u-icon>
            </view>
            <view class="action-btn delete-btn" @click.stop="deleteAddress(item, index)">
              <u-icon name="trash" size="28" color="#ff4757"></u-icon>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <view class="empty-icon">
          <u-icon name="map" size="120" color="#c0c4cc"></u-icon>
        </view>
        <text class="empty-title">暂无收货地址</text>
        <text class="empty-desc">添加收货地址，享受便捷购物体验</text>
      </view>

      <!-- 底部安全区域 -->
      <view class="safe-area-bottom"></view>
    </scroll-view>

    <!-- 底部新增按钮 -->
    <view class="bottom-action">
      <view class="add-btn" @click="addAddress">
        <u-icon name="plus" size="36" color="#fff"></u-icon>
        <text class="add-text">新增收货地址</text>
      </view>
    </view>
  </view>
</template>

<script>
import {
  mapGetters
} from 'vuex'

export default {
  data() {
    return {
      statusBarHeight: 0,
      showUse: false,//是否展示使用按钮
      addressList: [],//地址列表
    }
  },
  computed: {
    ...mapGetters(['openId', 'userInfo']),
  },
  onLoad(option) {
    if (option.flag) {
      this.showUse = true
    }
    this.getSystemInfo()
  },
  onShow() {
    this.loadAddressList()
  },
  methods: {
    // 获取系统信息
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
    },

    // 加载地址列表
    loadAddressList() {
      // 这里可以调用API获取地址列表
      let params = {
        openId: this.openId,
        userId: this.userInfo.id,
        pageNo: 1,
        pageSize: 100
      }
      this.$api.getMssdUserAddrList(params).then(res => {
        if (res.success) {
          this.addressList = res.result.records
        }
        console.log('加载地址列表', res)
      })
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 选择地址
    selectAddress(item) {
      // 如果是从其他页面跳转过来选择地址，则返回选中的地址
      const pages = getCurrentPages()
      if (pages.length > 1) {
        const prevPage = pages[pages.length - 2]
        if (prevPage.route.includes('order') || prevPage.route.includes('checkout')) {
          // 返回地址给上一页
          uni.$emit('selectAddress', item)
          uni.navigateBack()
          return
        }
      }

      // 否则进入编辑模式
      this.editAddress(item)
    },
    // 使用当前地址
    setUse(item) {
      let jsonItem = JSON.stringify(item)
      uni.setStorageSync('addressUse', jsonItem)
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    },
    // 设为默认地址
    setDefault(item) {
      uni.showModal({
        title: '确认',
        content: '确定要将此地址设为默认收货地址吗？',
        success: (res) => {
          if (res.confirm) {
            // console.log('设置默认', item)
            const submitData = {
              ...item,
              status: 1
            }
            this.$api.editMssdUserAddr(submitData).then(res => {
              if (res.success) {
                this.loadAddressList()
                uni.showToast({
                  title: '设置成功',
                  icon: 'none'
                })
              }
            })
          }
        }
      })
    },

    // 编辑地址
    editAddress(item) {
      // console.log('编辑地址:', item)
      uni.navigateTo({
        url: `/pagesMall/mallCenter/addressEdit?id=${item.id}&mode=edit`
      })
    },

    // 删除地址
    deleteAddress(item, index) {
      if (item.isDefault) {
        uni.showToast({
          title: '默认地址不能删除',
          icon: 'none'
        })
        return
      }

      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个收货地址吗？',
        success: (res) => {
          if (res.confirm) {
            console.log('删除', item)
            this.$api.delMssdUserAddr(item.id).then(res => {
              if (res.success) {
                this.addressList.splice(index, 1)
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                })
              } else {
                uni.showToast({
                  title: res.message || '删除失败',
                  icon: 'none'
                })
              }
            })
          }
        }
      })
    },

    // 新增地址
    addAddress() {
      console.log('新增地址')
      uni.navigateTo({
        url: '/pagesMall/mallCenter/addressEdit?mode=add'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.address-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.status-bar {
  background-color: #fff;
}

.custom-navbar {
  background-color: #fff;
  border-bottom: 2rpx solid #ebeef5;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
}

.navbar-left {
  width: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
}

.navbar-right {
  width: 80rpx;
}

.scroll-content {
  flex: 1;
  height: 0;
  padding-bottom: 160rpx;
}

.address-list {
  padding: 30rpx;
}

.address-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  position: relative;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.15);
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.default-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
  padding: 8rpx 20rpx;
  border-radius: 0 20rpx 0 20rpx;
}

.tag-text {
  font-size: 22rpx;
  color: #fff;
  font-weight: 500;
}

.address-info {
  padding-right: 20rpx;
}

.recipient-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.recipient-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
  margin-right: 30rpx;
}

.recipient-phone {
  font-size: 28rpx;
  color: #606266;
}

.address-detail {
  margin-bottom: 30rpx;
}

.address-text {
  font-size: 28rpx;
  color: #606266;
  line-height: 1.5;
}

.address-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 24rpx;
  border-radius: 8rpx;
  transition: all 0.3s ease;

  &.set-default-btn {
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.1);
    padding: 13rpx 18rpx;
    font-size: 26rpx;

    &:active {
      background-color: #e9ecef;
      transform: scale(0.95);
    }

    .btn-text {
      font-size: 24rpx;
      color: #ff6b35;
    }
  }

  &.edit-btn {
    background-color: rgba(65, 130, 187, 0.1);

    &:active {
      background-color: rgba(65, 130, 187, 0.2);
      transform: scale(0.95);
    }
  }

  &.delete-btn {
    background-color: rgba(255, 71, 87, 0.1);

    &:active {
      background-color: rgba(255, 71, 87, 0.2);
      transform: scale(0.95);
    }
  }
}

.use-but {
  color: #0088ff;
  background: rgba(16, 142, 233, 0.1);
  padding: 13rpx 18rpx;
  font-size: 26rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
  text-align: center;
}

.empty-icon {
  margin-bottom: 40rpx;
  opacity: 0.6;
}

.empty-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #909399;
  line-height: 1.5;
}

.safe-area-bottom {
  height: calc(env(safe-area-inset-bottom) + 40rpx);
}

.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 2rpx solid #ebeef5;
  padding: 30rpx;
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rpx;
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #4182bb 0%, #5a96d4 100%);
  border-radius: 44rpx;
  box-shadow: 0 8rpx 24rpx rgba(65, 130, 187, 0.3);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx) scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba(65, 130, 187, 0.4);
  }
}

.add-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
}
</style>
